<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>User List</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
<h1>User List</h1>
<div id="app">
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>Uname</th>
        <th>Gender</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(user, index) in users">
        <td>{{ user.id }}</td>
        <td>{{ user.uname }}</td>
        <td>{{ user.gender }}</td>
    </tr>
    </tbody>
</table>
</div>
<script type="module">

    axios({
        method:"GET",
        url:"http://localhost:8887/user/queryUser"
    }).then(result=>{
        //成功的回调
        console.log(result.data);
        // this.users = result.data;
    }).catch(error=>{
        //失败的回调

    });
    //
    // import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    // // import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';
    //
    //
    //
    // createApp({
    //     data(){
    //         return{
    //             users:[{}]
    //         }
    //     },
    //     mounted(){
    //         // this.fetchUsers();//组件挂载时调用
    //     },
    //     methods:{
    //         async fetchUsers(){
    //             // try{
    //                 /*const response = await axios.get('/queryUser'); //调用后端api
    //                 console.log(response);
    //                 this.users = response.data;//将数据赋值给suers*/
    //
    //                /* $.get('http://127.0.0.1:8887/queryUser', function(data){
    //                     console.log(data);
    //                     this.users = data;
    //                 })*/
    //
    //
    //             // }catch (e) {
    //             //     console.error('查询用户信息失败', error);
    //             // }
    //         }
    //     }
    // }).mount("#app");


</script>
</body>
</html>